<template>
  <div class="container-fuild">
    <div class="row">
      <div class="card">
        <div class="card-header">
          <p class="card-title" style="font-size: 20px;padding-left: 5px;font-weight: bold">实训班学生</p>
        </div>
        <div class="card-body custom-ekeditor">
          <div id="ckeditor">

            <el-input placeholder="请输入学生名字" v-model="search1Name" style="width: 160px;float: left">
              <i slot="prefix" class="el-input__icon el-icon-search" style="line-height: 30px"></i>
            </el-input>
            <el-button size="small" @click="search"
                       style="float: left;background-color: #7d94c0;color: white;margin-left: -1px">搜索
            </el-button>
            <!--            <el-button size="small" @click="search2" style="float: left;background-color: #7d94c0;color: white">-->
            <!--              学生导入模板下载-->
            <!--            </el-button>-->
            <!--            <el-button size="small"  @click="search3" style="float: left;background-color: #7d94c0;color: white">学生导入</el-button>-->
            <el-button size="small" @click="search4"
                       style="float: left;background-color: #7d94c0;color: white;margin-bottom: 30px;">
              添加单个学生
            </el-button>
            <el-upload
                class="upload-demo"
                action="#"
                multiple
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="fileList" style="float: left">

              <el-button size="small" slot="trigger" @click="search5()"
                         style="float: left;background-color: #7d94c0;color: white">
                批量添加学生
              </el-button>

            </el-upload>
            <!--            <el-button size="small" @click="search6" style="float: left;background-color: #7d94c0;color: white">-->
            <!--              学生个人分数导入模板-->
            <!--            </el-button>-->
            <!--            <el-button size="small" @click="search7"-->
            <!--                       style="float: left;background-color: #7d94c0;color: white;margin-bottom: 30px">个人分数导入-->
            <!--            </el-button>-->

            <template>
              <el-table
                  :data="tableData"
                  style="width: 100%;"
                  border
                  :default-sort="{prop: 'date', order: 'descending'}"
                  :header-cell-style="{'text-align':'center'}"
                  :cell-style="{'text-align':'center'}"

              >
                <el-table-column
                    label="姓名"
                    sortable
                    prop="student.studentName"
                    width="100">
                </el-table-column>
                <el-table-column
                    label="学号"
                    sortable
                    prop="student.studentId"
                    width="130">
                </el-table-column>
                <el-table-column
                    label="性别"
                    sortable
                    prop="student.gender"
                    width="90">
                </el-table-column>
                <el-table-column
                    label="年级"
                    sortable
                    prop="student.grade"
                    width="100">
                </el-table-column>
                <el-table-column
                    label="班级"
                    sortable
                    prop="student.banji"
                    width="90">
                </el-table-column>
                <el-table-column
                    label="专业"
                    sortable
                    prop="student.major"
                    width="130">
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini" style="background-color: #0261a0 ;color: white"
                               @click="handleEdit1(scope.$index, scope.row)">个人分数
                    </el-button>
                    <el-button size="mini" style="background-color: #3ca3e4 ;color: white"
                               @click="handleEdit2(scope.$index, scope.row)">日志
                    </el-button>
                    <el-button size="mini" style="background-color: #3abdea ;color: white"
                               @click="handleEdit3(scope.row,scope.$index)">删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>


            <el-dialog title="添加单个学生" :visible.sync="dialog4" style="font-weight: bold"
                       append-to-body width="35%" class="showAll_dialog">
              <el-form label-width="80px" :rules="rules4">
                <el-form-item label="学号:" label-width="30%" style="padding-right: 80px;padding-top: 30px">
                  <el-input v-model="s4.id">{{ s4.id }}</el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                  <el-button
                      style="margin-bottom:30px;margin-right: 150px;background-color: #7d94c0;border-color: #7d94c0;"
                      type="primary"
                      @click="submitSoloForm('s4')">立即创建</el-button>
                <!--                  <el-button style="margin-bottom:30px;margin-right: 120px" @click="resetForm('s4')">重置</el-button>-->
                <!--                       <el-button style="background-color: #0261a0;border-color: #0261a0;color: white" @click="dialog4 = false">确 定</el-button>-->
              </span>
            </el-dialog>

            <el-dialog title="指导老师个人对学生评分" :visible.sync="dialogVisible1" style="font-weight: bold;"
                       append-to-body width="40%" class="showAll_dialog">
              <el-form label-width="80px">
                <el-form-item label="出勤率" label-width="60%" style="padding-right: 160px;padding-top: 30px">
                  <el-input v-model="form1.att">{{ form1.att }}</el-input>
                </el-form-item>
                <el-form-item label="辅助教学" label-width="60%" style="padding-right: 160px">
                  <el-input v-model="form1.ass">{{ form1.ass }}</el-input>
                </el-form-item>
                <el-form-item label="课堂综合表现" label-width="60%" style="padding-right: 160px">
                  <el-input v-model="form1.class">{{ form1.class }}</el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button style="background-color: #0261a0;border-color: #0261a0;color: white"
                           @click="dialogVisible1 = false">确 定</el-button>
              </span>
            </el-dialog>

            <el-dialog title="学生个人日志" :visible.sync="dialogVisible2" style="font-weight: bold"
                       append-to-body width="70%" class="showAll_dialog">
              <div>
                <template>
                  <el-table
                      :data="tableData2" :cell-style="cellStyle"
                      style="width: 100% ;color: #7d94c0">
                    <el-table-column
                        label="序号"
                        width="90">
                      <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.id }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                        label="日志时期"
                        width="160">
                      <template slot-scope="scope">
                        <span>{{ scope.row.logDate }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                        label="星期"
                        width="120">
                      <template slot-scope="scope">
                        <span>{{ scope.row.weekday }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                        label="摘要" :show-overflow-tooltip="true"
                        width="250">
                      <template slot-scope="scope">
                        <!--                      <span>{{scope.row.content}}</span>-->
                        <!--                      <div v-else-if="scope.row.content !==''">-->
                        <p v-html="removeHtml(scope.row.content)"></p>
                        <!--                      </div>-->
                      </template>
                    </el-table-column>
                    <el-table-column
                        label="状态"
                        width="120">
                      <template slot-scope="scope">
                        <span>{{ scope.row.isEdit }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" style="margin-left: 30px">
                      <template slot-scope="scope">
                        <el-button size="mini" style="background-color: steelblue ;color: white"
                                   @click="handleEdit22(scope.$index, scope.row)">查看
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="block" style="margin-top: 30px;margin-bottom: 10px;margin-left: 250px">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-size="10"
                        layout="prev, pager, next, jumper"
                        :total="parseInt(pages)">
                    </el-pagination>
                  </div>
                </template>
              </div>
            </el-dialog>
            <el-dialog title="学生日志" :visible.sync="dialogVisible22" style="font-weight: bold"
                       append-to-body width="65%" class="showAll_dialog">
              <el-form :model="studentLog" ref="studentLog" label-width="80px" class="demo-ruleForm" :inline="true">
                <el-row>
                  <el-form-item label="实训班级" prop="className" style="float: left;margin-left: 30px">
                    <el-input v-model="teacher.className" :disabled="true"></el-input>
                  </el-form-item>
                  <el-form-item label="实训教师" prop="manager" style="float: left;margin-left: 50px">
                    <el-input v-model="studentLog.manager"></el-input>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="实训地点" prop="location" style="float: left;margin-left: 30px">
                    <el-input v-model="studentLog.location"></el-input>
                  </el-form-item>
                  <el-form-item label="实训时间" prop="logDate" style="float: left;margin-left: 50px">
                    <el-input v-model="studentLog.logDate" :disabled="true"></el-input>
                  </el-form-item>
                </el-row>

                <el-row>
                  <el-form-item prop="content" style="display: flex;">
                    <template>
                      <quill-editor class="editor" style="height: 150px;width: 750px;margin-left: 30px"
                                    ref="myTextEditor"
                                    v-model="studentLog.content"
                                    :options="editorOption"
                                    @blur="onEditorBlur($event)"
                                    @focus="onEditorFocus($event)"
                                    @ready="onEditorReady($event)"
                                    @change="onEditorChange($event)">
                      </quill-editor>
                    </template>
                  </el-form-item>
                </el-row>

              </el-form>
            </el-dialog>


          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: this.$route.query.id,
      teacher: {
        teacherName: '',
        className: ''
      },
      studentId: '',
      name: null,
      search1Name: '',
      search1Table: {
        studentName: ''
      },
      tableData: [],
      tableData2: [],
      s4: {
        id: ""
      },
      s3:{
        id:''
      },
      dialog1: false,
      dialog2: false,
      dialog4: false,
      dialog5: false,
      dialog6: false,
      dialog7: false,
      ruleForm: {},
      rules: {},
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible22: false,
      form1: {
        att: '20',
        ass: '40',
        class: '60',
      },
      form2: [],
      currentPage: 1,
      pages: '',
      fileList: [],
      editorOption: {  //富文本编辑器
        modules: {
          toolbar: [
            [{color: []}, {background: []}], // 字体颜色、字体背景颜色
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            [{'size': ['small', false, 'large', 'huge']}], // 字体大小
            ['blockquote', 'code-block'], // 引用  代码块
            [{header: 1}, {header: 2}], // 1、2 级标题
            [{list: 'ordered'}, {list: 'bullet'}], // 有序、无序列表
            [{script: 'sub'}, {script: 'super'}], // 上标/下标
            [{indent: '-1'}, {indent: '+1'}], // 缩进
            [{align: []}], // 对齐方式
          ],
        },
        placeholder: '请在这里填写日志', //提示
        readyOnly: false, //是否只读
        theme: 'snow', //主题 snow/bubble
        syntax: true, //语法检测
      },
      studentLog: {
        content: '',
        manager: '',
        logDate: '',
        location: '',
        advice: ''
      },
      rules4: {
        id: [
          {required: true, message: '请填写评价', trigger: 'blur'},
        ],
      },
    }
  },

  mounted() {
    this.tableDataShow();
    this.teacherShow();
  },

  methods: {
    tableDataShow() {
      let that = this;
      that.axios.get('http://localhost:9090/user/getStudentByPhone/' + that.id)
          .then(ret => {
            // console.log(ret.data.data)
            this.tableData = ret.data.data;
          })
    },
    teacherShow() {
      let that = this;
      that.axios.get('http://localhost:9090/user/getTeacherByPhone/' + that.id)
          .then(ret => {
            this.teacher.className = ret.data.data[0].className;
            // console.log(ret.data.data[0]);
            // console.log(this.teacher.className)
          }).catch(err => {
        console.log(err);
      })
    },
    search: function () {
      let that = this;
      that.$axios({
        method: 'post',
        url: 'http://localhost:9090/user/queryStudentByPhoneAndName',
        header: {
          // 'Content-type':'application/json'
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
        },
        data: {
          phone: this.id,
          name: this.search1Name
        },
        transformRequest: [function (data) {
          let ret = ''
          for (let it in data) {
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
          }
          return ret
        }]
      }).then((res) => {
        // console.log(res.data.data)
        this.tableData = res.data.data;
      })

    },
    search2: function () {
    },
    search4() {  //添加单个学生
      this.dialog4 = true;
      let that = this;


    },
    search5(event) { //批量导入
      // let formFile = new FormData();
      // formFile.append("file", event.target.files[0]);
      // formFile.append('className',teacher.className);
      // //调用接口
      // this.axios.post("http://localhost:9090/upload", formFile)
      //     .then(res => {console.log(res)})
      //     .catch(err =>{console.log(err)})
      let file = new FormData();
      let that = this;
      let that2 = this;
      this.fileList.forEach(
          (val, index) => {
            file.append("file", val.raw);
          }
      );
      // file.append('className', that.teacher.className)
      // param.append('loadPerson','')
      console.log(file);
      that.$axios({
        method:'post',
        url:'http://localhost:9090/import',
        header:{
          'Content-type':'application/json'
        },
        data:{
          file:file,
          className:that.teacher.className,
        },
        transformRequest:[function (data){
          let ret =''
          for (let it in data){
            ret +=encodeURIComponent(it) + '=' +encodeURIComponent(data[it]) + '&'
          }
          return ret
        }]
      }).then((res) => {
        console.log(res)
      }).catch(function (error) {
        console.log(error)
      })
      // that.axios.post("http://localhost:9090/import", file)
      //     .then(res => {
      //       console.log(res)
      //     })
      //     .catch(err => {
      //       console.log(err)
      //     })
    },
    search6: function () {
    },
    search7: function () {
    },
    // submitSoloForm(formName) {
    submitSoloForm(formName) { //添加单个学生
      let that = this;
      console.log(this.teacher.className)
      console.log(this.s4.id)
      this.$axios.post('http://localhost:9090/user/addTrainingStu', {
        className: this.teacher.className,
        studentId: this.s4.id,
      }).then(res => {
        // console.log(data)
        console.log(res)
        alert('添加成功!');
        this.dialog4 = false;
        this.$router.go(0);
      }).catch(error => {
        console.log('添加失败')
        console.log(error)
      })
      // that.$axios({
      //   method: 'post',
      //   url: 'http://localhost:9090/user/addTrainingStu',
      //   header: {
      //     'Content-type': 'application/json'
      //   },
      //   data: {
      //     className: this.teacher.className,
      //     studentId: this.s4.id,
      //   },
      //   transformRequest: [function (data) {
      //     let ret = ''
      //     for (let it in data) {
      //       ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      //     }
      //     return ret
      //   }]
      // }).then((res) => {
      //   console.log(res.data)
      // }).catch(function (error) {
      //   alert('该学号有误')
      //   console.log(error)
      // })


      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     alert('submit!');
      //   } else {
      //     console.log('error submit!!');
      //     return false;
      //   }
      // }
      // );
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    cellStyle({row, column, rowIndex, columnIndex}) {
      // if(row.morning !== "正常" || row.afternoon !== "正常" || row.evening !== "正常"){ //指定坐标rowIndex ：行，columnIndex ：列
      //     return 'background-color:rgb(255 248 248);' //rgb(105,0,7)
      // }
      if ((row.isEdit !== "已编辑" && columnIndex === 4)) {
        return "color:#e26f6f;"
      } else return 'color:#7d94c0'
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    handleEdit1(column,row) {
      this.dialogVisible1 = true;

    },
    handleEdit2(column, row) {
      this.dialogVisible2 = true;
      let that = this;
      this.studentId = row.student.studentId
      console.log();
      console.log(this.teacher.className)
      this.axios.get('http://localhost:9090/user/getStudentLog/' + this.studentId + '/' + this.teacher.className + '/' + this.currentPage)
          .then(res => {
            console.log(res.data.data);
            that.tableData2 = res.data.data.list;
            that.pages = res.data.data.total
            console.log(res.data.data.total);
          }).catch(err => {
        console.log(err);
      })
    },
    handleEdit22(index, row, rowIndex) {
      // console.log(index, row,rowIndex);
      // this.classname2 = row.className;
      this.studentLog.logDate = row.logDate;
      // console.log(classname);
      this.dialogVisible22 = true;
      let that = this;
      // this.axios.get('http://localhost:9090/user/getAttendance/' + this.teacher.className + '/' +this.studentId)
      //     .then(function (ret) {
      //       console.log(ret.data.data);
      //       that.studentLog = ret.data.data;
      //     }).catch(function (err) {
      // })
      let that1 = this;
      that1.axios.get('http://localhost:9090/user/getOneLogDate/' + row.logDate)
          .then(res => {
            // console.log(res.data.data[0].content)
            that.studentLog.content = res.data.data[0].content;
            that.studentLog.location = res.data.data[0].location;
            that.studentLog.manager = res.data.data[0].manager;

          }).catch(function (err) {
      })
    },
    handleEdit3(row, column) {
      // this.dialogVisible3 = true;
      this.s3.id=row.student.studentId;
      let that = this;
      // console.log(this.s3.id);
      // console.log(this.teacher.className);
      that.axios.post('http://localhost:9090/user/deleteTrainStu',{
        studentId:this.s3.id,
        className:this.teacher.className
      })
          .then(res => {
            // console.log(data)
            console.log(res)
            alert('删除成功!');
            // this.dialogVisible3 = false;
            this.$router.go(0);
          }).catch(error => {
        alert('删除失败')
        console.log(error)
        // this.$router.go(0);
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.tableShow();
    },
    removeHtml(str) {
      if (str === 'Undefined' || str === 'null' || str === '') { //空
        return 'null';
      } else if (Object.prototype.toString.call(str) === '[object Undefined]') { //空
        return 'true';
      } else if (
          Object.prototype.toString.call(str) === '[object String]' ||
          Object.prototype.toString.call(str) === '[object Array]') { //字条串或数组
        return str.length == 0 ? true : str
            .replace(str ? /&(?!#?\w+;)/g : /&/g, '&amp;')
            .replace(/&lt;/g, "<")
            .replace(/&gt;/g, ">")
            .replace(/&quot;/g, "\"")
            .replace(/&#39;/g, "\'")
            .replace(/&amp;nbsp;/g, '\u3000')
            .replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/g)
            .replace(/(\t)/g, "") // 去掉换行
            .replace(/<\/?[^>]*>/g, "") // 去掉标签

      } else {
        return ''
      }
    },
  }
}
</script>

<style scoped>
/*表头*/
.container-fuild {

  float: left;
  /*padding-top:1.875rem;*/
  padding-right: 1.875rem;
  padding-left: 1.875rem;
  width: 93%;
  margin-right: auto;
  margin-left: auto;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: #7d94c0;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


.page-titles .breadcrumb {
  padding: 0;
  background: transparent;
  font-size: 1.1875rem;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  list-style: none;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
}

.breadcrumb li.active {
  font-weight: 600;
  font-size: 1.1875rem;
}

.breadcrumb li {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0.5rem;
  font-size: 1.1875rem;
}

/*主题部分*/
.row {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) / -2);
  margin-left: calc(var(--bs-gutter-x) / -2);
}

.card {
  width: 100%;
  margin-bottom: 1.875rem;
  background-color: #fff;
  transition: all .5s ease-in-out;
  position: relative;
  border: 0rem solid transparent;
  border-radius: 1.25rem;
  box-shadow: 0rem 0.3125rem 0.3125rem 0rem rgb(82 63 105 / 5%);
  height: calc(100% - 30px);

  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
}

.card-header {
  border-color: #f5f5f5;
  position: relative;
  background: transparent;
  padding-top: 0rem;
  padding-right: 1.875rem;
  padding-bottom: 0rem;
  padding-left: 1.875rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 1.1rem;
  font-weight: 300;
  color: #909399;
  text-transform: capitalize;
}

.card-body {
  padding-top: 0.125rem;
  padding-right: 1.875rem;
  padding-bottom: 2.125rem;
  padding-left: 0.850rem;
  margin-left: 20px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}


/*搜索输入框高度*/
/deep/ .el-input__inner {
  height: 31px;
}

/*设置small按钮的padding*/
.el-button--small {
  padding-left: 18px;
  padding-right: 18px;
  margin-left: 15px;
}

.el-button--mini {
  padding-left: 17px;
  padding-right: 17px;
  margin-left: 15px;
}

/*按钮的圆角*/
::v-deep .el-button {
  border-radius: 5px;
}


</style>